<template>
  <!-- 设备参数 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="模板类别">
        <a-select
          v-model:value="filterForm.modelType"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option
            v-for="(value, key) in modeTypeMap"
            :key="key"
            :value="key"
            :label="value"
            :title="value"
          >
            {{ value }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="关联企业">
        <a-select
          ref="select"
          v-model:value="filterForm.companyId"
          class="formInput"
          placeholder="请输入"
          show-search
          optionFilterProp="label"
          @change="changeCompany"
          allow-clear
        >
          <a-select-option
            v-for="item in companyList"
            :key="item.id"
            :value="item.id"
            :label="item.projectName"
            :title="item.projectName"
          >
            {{ item.projectName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="关联电站">
        <a-select
          ref="select"
          v-model:value="filterForm.stationId"
          class="formInput"
          placeholder="电站"
          show-search
          optionFilterProp="label"
          @change="changeStation"
          :disabled="!filterForm.companyId"
          allow-clear
        >
          <a-select-option
            v-for="item in stationList"
            :key="item.stationId"
            :value="item.stationId"
            :label="item.stationName"
            :title="item.stationName"
          >
            {{ item.stationName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="关联电池堆">
        <a-select
          ref="select"
          v-model:value="filterForm.linkId"
          class="formInput"
          placeholder="电池堆"
          @change="changeLink"
          :disabled="!filterForm.stationId"
          allow-clear
          show-search
        >
          <a-select-option
            v-for="item in linkList"
            :key="item.deviceId"
            :value="item.deviceId"
            :label="item.name"
            :title="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="关联电池簇">
        <a-select
          ref="select"
          v-model:value="filterForm.blockId"
          class="formInput"
          placeholder="电池簇"
          :disabled="!filterForm.linkId"
          show-search
          allow-clear
        >
          <a-select-option
            v-for="item in blockList"
            :key="item.deviceId"
            :value="item.deviceId"
            :label="item.name"
            :title="item.name"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="参数类别">
        <a-select
          ref="select"
          v-model:value="filterForm.paramType"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option :value="1">采集</a-select-option>
          <a-select-option :value="2">计算</a-select-option>
          <a-select-option :value="3">本地值</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="状态">
        <a-select
          ref="select"
          v-model:value="filterForm.enable"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option :value="1">启用</a-select-option>
          <a-select-option :value="0">禁用</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="报文类别">
        <a-input
          v-model:value="filterForm.msgCodeLikeList"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="参数名">
        <a-input
          v-model:value="filterForm.paramNameLikeList"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="属性名">
        <a-input
          v-model:value="filterForm.attrNameLikeList"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="ID" name="ID">
        <a-input
          v-model:value="filterForm.ids"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>

      <a-button type="primary" class="filterBtn" @click="getParamDetailPage(1)"
        >查询</a-button
      >
      <a-button v-hasPermission="'equipParamCache'" type="primary" class="filterBtn" @click="loadParamDetailCache"
        >加载缓存</a-button
      >
    </a-form>
  </div>
  <div class="tableContent">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :rowKey="(record) => record.id"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'id'">
          <a-button type="link" v-param="record.id">
            {{ record.id }}
          </a-button>
        </template>
        <template v-if="column.key === 'enable'">
          {{ record.enable === 1 ? "启用" : "禁用" }}
        </template>
        <template v-if="column.key === 'modelType'">
          {{ modeTypeMap[record.modelType] }}
        </template>
        <template v-if="column.key === 'paramType'">
          {{ paramTypeMap[record.paramType] }}
        </template>
        <template v-if="column.key === 'storageType'">
          {{ storageTypeMap[record.storageType] }}
        </template>
        <template v-if="column.key === 'handle'">
          <a-button v-hasPermission="'equipParamUpdate'" type="link" @click="updateValue(record)">修改</a-button>
          <a-button
            type="link"
            v-show="record.paramType === 2"
            @click="computeValue(record)"
            v-hasPermission="'equipParamCompute'"
            >计算</a-button
          >
          <a-button v-hasPermission="'equipParamExport'" type="link" @click="exportValue(record)">导出</a-button>
          <a-button type="link" @click="detail(record)">查看</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getParamDetailPage(null)"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>

  <UpdateValue
    :updateValueVisible="updateValueVisible"
    :rowData="rowData"
    @update:updateValueVisible="updateValueVisible = $event"
    @getParamDetailPage="getParamDetailPage"
  ></UpdateValue>
  <ComputeExport
    :computeExportVisible="computeExportVisible"
    :rowData="rowData"
    @compute:computeExportVisible="computeExportVisible = $event"
    @getParamDetailPage="getParamDetailPage"
    :isExport="isExport"
    :title="title"
  ></ComputeExport>
  <Detail
    :detailVisible="detailVisible"
    :rowData="rowData"
    @detail:detailVisible="detailVisible = $event"
    @getParamDetailPage="getParamDetailPage"
  ></Detail>
</template>
<script setup>
// 
import UpdateValue from "./conpoments/updateValue.vue"
import ComputeExport from "./conpoments/computeExport.vue"
import Detail from "./conpoments/detail.vue"
import { paramTypeMap, storageTypeMap } from "@/constants/paramDetailConfig.js"
const route = useRoute()
const $api = inject("$api")
const filterForm = ref({
  modelType: null,
  companyId: null,
  stationId: null,
  linkId: null,
  blockId: null,
  paramType: null,
  enable: null,
  msgCodeLikeList: null,
  paramNameLikeList: null,
  attrNameLikeList: null,
  ids: null,
  size: 10,
  current: 1,
})

const modeTypeMap = ref([])
const companyList = ref([])
const stationList = ref([])
const linkList = ref([])
const blockList = ref([])

const total = ref()
const tableData = ref([])
const isExport = ref(false)
const title = ref("")
const rowData = ref({})
const tableLoading = ref(false)
const updateValueVisible = ref(false)
const computeExportVisible = ref(false)
const detailVisible = ref(false)

const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id",
    width: 80,
    resizable: true,
    align: "center",
    fixed: "left",
  },
  {
    title: "参数名称",
    dataIndex: "paramName",
    key: "paramName",
    width: 200,
    resizable: true,
    align: "center",
    fixed: "left",
  },
  {
    title: "属性名称",
    dataIndex: "attrName",
    key: "attrName",
    width: 200,
    resizable: true,
    align: "center",
    fixed: "left",
  },
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "电池堆名称",
    dataIndex: "linkName",
    key: "linkName",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "电池簇名称",
    dataIndex: "blockName",
    key: "blockName",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "模板类别",
    dataIndex: "modelType",
    key: "modelType",
    width: 100,
    resizable: true,
    align: "center",
  },
  {
    title: "报文类别",
    dataIndex: "msgCode",
    key: "msgCode",
    width: 100,
    resizable: true,
    align: "center",
  },
  {
    title: "参数类别",
    dataIndex: "paramType",
    key: "paramType",
    width: 80,
    resizable: true,
    align: "center",
  },
  {
    title: "存储类别",
    dataIndex: "storageType",
    key: "storageType",
    width: 100,
    resizable: true,
    align: "center",
  },
  {
    title: "间隔时长",
    dataIndex: "hisInterval",
    key: "hisInterval",
    width: 80,
    resizable: true,
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "enable",
    key: "enable",
    width: 80,
    resizable: true,
    align: "center",
  },
  {
    title: "计算公式",
    dataIndex: "calcFormula",
    key: "calcFormula",
    width: 200,
    resizable: true,
    align: "center",
    // ellipsis:true,
  },
  {
    title: "初始值",
    dataIndex: "value",
    key: "value",
    width: 80,
    resizable: true,
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "unit",
    key: "unit",
    width: 50,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 200,
    resizable: true,
    align: "center",
    fixed: "right",
  },
]

function handleResizeColumn(w, col) {
  col.width = w
}

onMounted(() => {
  if (route.query.id !== null) {
    filterForm.value.ids = route.query.id
  }
  getModelTypeMap()
  getCompanyList()
  getParamDetailPage()
  modelStorageList()
})

const modelStorageList = async () => {
  const res = await $api.modelStorageList()
  if (res && res.code === 0) {
    storageTypeMap.value = res.data
  }
}

const loadParamDetailCache = async () => {
  const res = await $api.loadParamDetailCache()
  if (res && res.code === 0) {
    message.success("操作成功")
  }
}

const getParamDetailPage = async (cur) => {
  if (cur !== null && cur !== undefined) {
    filterForm.value.current = cur
  }
  tableLoading.value = true
  const { current, size, ...rest } = filterForm.value
  const params = { ...rest }
  if (params.ids !== undefined && params.ids !== null) {
    if (params.ids.trim().length > 0) {
      params.ids = params.ids.split(",").map((e) => Number(e))
    } else {
      params.ids = null
    }
  }
  if (params.msgCodeLikeList !== undefined && params.msgCodeLikeList !== null) {
    if (params.msgCodeLikeList.trim().length > 0) {
      params.msgCodeLikeList = params.msgCodeLikeList
        .split(",")
        .map((e) => e.trim())
    } else {
      params.msgCodeLikeList = null
    }
  }
  if (
    params.paramNameLikeList !== undefined &&
    params.paramNameLikeList !== null
  ) {
    if (params.paramNameLikeList.trim().length > 0) {
      params.paramNameLikeList = params.paramNameLikeList
        .split(",")
        .map((e) => e.trim())
    } else {
      params.paramNameLikeList = null
    }
  }
  if (
    params.attrNameLikeList !== undefined &&
    params.attrNameLikeList !== null
  ) {
    if (params.attrNameLikeList.trim().length > 0) {
      params.attrNameLikeList = params.attrNameLikeList
        .split(",")
        .map((e) => e.trim())
    } else {
      params.attrNameLikeList = null
    }
  }
  const res = await $api.getParamDetailPage(params, current, size)
  if (res && res.code === 0) {
    tableData.value = res.data.records
    total.value = res.data.total
    tableLoading.value = false
  }
}

const getModelTypeMap = async () => {
  const res = await $api.getModelTypeMap()
  if (res && res.code === 0) {
    modeTypeMap.value = res.data
  }
}

const getCompanyList = async () => {
  const res = await $api.companyList()
  if (res && res.code === 0) {
    companyList.value = res.data
  }
}

const changeCompany = async (id) => {
  filterForm.value.stationId = null
  filterForm.value.linkId = null
  filterForm.value.blockId = null
  stationList.value = []
  linkList.value = []
  blockList.value = []
  getStationList(id)
}
const getStationList = async (id) => {
  const params = { companyId: id }
  const res = await $api.companyStationtList(params)
  if (res && res.code === 0) {
    stationList.value = res.data
  }
}

const changeStation = async (id) => {
  filterForm.value.linkId = null
  filterForm.value.blockId = null
  linkList.value = []
  blockList.value = []
  getLinkList(id)
}
const getLinkList = async (id) => {
  const params = { stationId: id }
  const res = await $api.energyLinkList(params)
  if (res && res.code === 0) {
    linkList.value = res.data
  }
}

const changeLink = async (id) => {
  filterForm.value.blockId = null
  blockList.value = []
  getBlockList(id)
}
const getBlockList = async (id) => {
  const { stationId } = filterForm.value
  const params = { stationId: stationId, linkId: id }
  const res = await $api.powerBlockList(params)
  if (res && res.code === 0) {
    blockList.value = res.data
  }
}

const updateValue = (record) => {
  rowData.value = record
  updateValueVisible.value = true
}
const computeValue = (record) => {
  rowData.value = record
  computeExportVisible.value = true
  isExport.value = false
  title.value = "计算参数"
}
const exportValue = (record) => {
  rowData.value = record
  computeExportVisible.value = true
  isExport.value = true
  title.value = "导出参数"
}
const detail = (record) => {
  rowData.value = record
  detailVisible.value = true
}
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>
